<template>
	<div id="app">

		<search></search>
		<div class="mui-row tab" v-show='isshowsearch'>
			<div class="mui-col-xs-4">
				<router-link to="/home">
					音乐库
				</router-link>
			</div>
			<div class="mui-col-xs-4">
				<router-link to="/singer">歌手</router-link>
			</div>
			<div class="mui-col-xs-4">
				<router-link to="/member">个人信息</router-link>
			</div>
		</div>

		<loading v-if="loading"></loading>
		<transition name="custom-classes-transition" enter-active-class="animated bounceInUp">
			<router-view></router-view>
		</transition>
		<transition name="custom-classes-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
			<audio-box v-show="isshowbox" ref="audio"></audio-box>
		</transition>
		<audio-bar v-if="songurl" @play="tapButton()"></audio-bar>
		<transition name="custom-classes-transition" enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutRight">
			<collectlist v-show="isshowcollect"></collectlist>
		</transition>
	</div>
</template>

<script>
	import search from "./components/search"
	import audioBox from "./components/audio"
	import collectlist from "./components/collectlist"
	import loading from "./components/loading/loading"
	import audioBar from "./components/audiobar"
	import { mapGetters } from 'vuex'
	export default {
		name: 'app',
		computed: {
			...mapGetters([
				'isshowbox',
				'songurl',
				'isplaying',
				'loading',
				'isshowcollect',
				'isshowsearch'
			])
		},
		watch: {
			$route(to) { //监听路由变动
				var path = to.path.substring(1);

				this.issearch(path)
			}
		},
		methods: {
			issearch(path) {

				if(path.indexOf('songlist/') >= 0 || path.indexOf('suggestlist') >= 0 || path.indexOf('searchlist') >= 0) {
					this.$store.dispatch('isshowsearch')
				} else {
					this.$store.dispatch('isshowsearchshow')
				}
				if(path == '/home') {
					this.$store.dispatch('isbackfalse')
				} else {
					this.$store.dispatch('isback')
				}
			},
			tapButton() {
				const musicself = document.querySelector('audio')

				if(this.isplaying == false) {
					musicself.play();
					this.$store.dispatch('isplaying')
				} else {
					musicself.pause();
					this.$store.dispatch('noplaying')

				}
			},
			prev() {
				this.$refs.audio.prev();
			},
			next() {
				this.$refs.audio.next();
			}
		},
		components: {
			search,
			audioBox,
			audioBar,
			loading,
			collectlist

		}
	}
</script>

<style lang="scss" rel="stylesheet/scss">
	#app {
		.tab {
			position: fixed;
			width: 100%;
			top: 6vh;
			color: #fff;
			div {
				text-align: center;
				a {
					display: block;
					padding: 9px 0;
					color: #fff;
					width: 100%;
					&.active {
						color: #28F5FF;
						border-bottom: 3px #28F5FF solid;
					}
				}
			}
		}
	}
</style>